<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      class="box-search"
      v-model="value"
      placeholder="请输入搜索关键词"
      show-action
      @search="onSearch"
      @input="onInput"
      @cancel="onCancel"
    />
    <!-- 搜索历史 -->
    <div class="box-content box-history" v-if="!resultVisible">
      <div class="box-history-content" v-if="hsVisible">
        <van-row type="flex" justify="space-around" class="juli">
          <van-col span="6">搜索历史</van-col>
          <van-col span="6"></van-col>
          <van-col span="6">
            <i class="van-icon van-icon-delete" @click="hsdelete"></i>
          </van-col>
        </van-row>
        <!-- tag -->
        <van-tag
          v-for="item1 in sousuolist"
          :key="item1.id"
          v-show="tagVisible"
          round
          size="large"
        >{{item1}}</van-tag>
      </div>
      <!-- 分割线 -->
      <van-divider :style="{ padding: '0 16px' }" v-else>暂无历史记录</van-divider>
    </div>
    <div class="box-content box-result" v-else>
      <!-- 搜索结果 -->
      <van-swipe-cell v-for="item in searchlist" :key="item.id">
        <van-cell :border="false" :title="item.name">
          <span slot="default">商品上架时间：{{item.ctime | clipDate(0,10)}}</span>
        </van-cell>
        <template slot="right">
          <van-button square type="danger" text="删除" @click="resultdelete(item.id)" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import axios from "axios";
import _ from "lodash";

export default {
  data() {
    return {
      searchlist: [],
      sousuolist: [],
      value: "",
      key: "",
      resultVisible: false,
      hsVisible: false
    };
  },
  created() {
    this.getSearch();
    this.onCancel();
  },
  methods: {
    ...mapMutations(["hideAddGoodButton"]),
    getSearch() {
      axios
        .get("api/getprodlist")
        .then(res => {
          this.searchlist = _.shuffle(res.data.message);
        })
        .catch(res => console.log(res));
      //  window.localStorage
    },
    onSearch() {
      this.sousuolist.push(this.value);
      window.localStorage.setItem(
        "searchHistory",
        JSON.stringify({
          data: this.sousuolist
        })
      );
    },
    onInput() {
      this.resultVisible = true;
      this.tagVisible = false;
      _.throttle(() => {
        this.getSearch();
      }, 1000)();
    },
    onCancel() {
      this.resultVisible = false;
      this.tagVisible = true;
      var he = window.localStorage.getItem("searchHistory");
      this.sousuolist = JSON.parse(he).data;

      this.hsVisible = this.sousuolist.length > 0;
    },
    hsdelete() {
      this.sousuolist = [];
      localStorage.setItem("searchHistory", '{"data":[]}');
      this.hsVisible = false;
    },

    resultdelete(id) {
      console.log(id);

      this.$dialog
        .confirm({
          title: "警告",
          message: "是否确认删除该商品"
        })
        .then(() => {
          axios
            .get("api/delproduct/" + id)
            .then(res => {})
            .catch(() => {
              // 用户取消了删除的操作
            });
        })
        .catch(() => {
          this.$notify({ type: "danger", message: "取消操作成功" });
          // todo
        });
    }
  }
};
</script>
<style lang="less" scoped>
.box-search {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 1;
}
.box-content {
  margin-top: 54px;
}
.van-nav-bar {
  background-color: #1989fa;
}
.van-ellipsis {
  color: #fff;
}
.van-nav-bar__text,
.van-icon-arrow-left:before {
  color: #fff;
}
.searchHistory {
  width: 375px;
  height: 117px;
}
.top {
  position: absolute;
  width: 345px;
  height: 52px;
  line-height: 52px;
  margin: 0 15px;
}
.van-icon {
  position: relative;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font: 14px/1 vant-icon;
  font-size: inherit;
  text-rendering: auto;
  float: right;
}
.juli {
  margin: 10px 0;
}
.van-tag {
  margin: 15px 5px;
}
</style>
